﻿{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左侧导航栏</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="/static/css/page.css"/>
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/static/css/icons.min.css"/>
    <script src="/static/plugins/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="page" id="app">
    <div class="nav-left" id="zleft" style="z-index: 998">
        <div class="LogoName">
            智能分析平台
            <a class="btn border-0" id="menu-btn"><i class="bx bx-menu"></i></a>
        </div>
        <div class="navDiv">
            <div class="nav-list">
                <ul>
                    <li class="nav-tab a_active waves-effect">
                        <a href="home.html" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 主页
                            <span class="badge badge-pill badge-primary float-right">3</span>
                        </a>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a" target="iframe"><i class='bx bx-cog'></i> 网站管理
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="admin" class="li-a-a" target="iframe">站点管理</a>
                            <a href="device.html" class="li-a-a" target="iframe">采集记录</a>
                            <a href="device.html" class="li-a-a" target="iframe">设备详细</a>
                            <a href="device.html" class="li-a-a" target="iframe">运行状态统计</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-layer'></i> 维修保养
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="device.html" class="li-a-a" target="iframe">养护计划</a>
                            <a href="device.html" class="li-a-a" target="iframe">养护任务</a>
                            <a href="device.html" class="li-a-a" target="iframe">养护记录</a>
                            <a href="device.html" class="li-a-a" target="iframe">养护统计</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 巡检管理
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="device.html" class="li-a-a" target="iframe">巡检计划</a>
                            <a href="device.html" class="li-a-a" target="iframe">巡检任务</a>
                            <a href="device.html" class="li-a-a" target="iframe">巡检标准</a>
                            <a href="device.html" class="li-a-a" target="iframe">巡检统计</a>
                        </div>
                    </li>
                    <li class="nav-tab nav-ul">
                        <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 工单管理
                            <i class='bx bx-chevron-right' style="float: right;"></i></a>
                        <div class="nav-box">
                            <a href="device.html" class="li-a-a" target="iframe">维修计划</a>
                            <a href="device.html" class="li-a-a" target="iframe">故障报修</a>
                            <a href="device.html" class="li-a-a" target="iframe">委外维修</a>
                            <a href="device.html" class="li-a-a" target="iframe">维修工单</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav-right" style="z-index: 998">
        <div class="content-page">
            <iframe name="iframe" width="100%" height="100%" frameborder="0"
                    src="home.html"></iframe>
        </div>
    </div>
</div>
<!-- <script src="js/vue.min.js"></script> -->
{#        <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>#}
<script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        let navflag = false;
        $('.nav-tab').click(function () {
            $(this).siblings().each(function () {
                $(this).removeClass('a_active');
                // $(this).removeClass('a_active');
                $(this).find('.nav-box').css('height', '0')
                //关闭右侧箭头
                if ($(this).attr('class').indexOf('nav-ul') != -1) {
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).removeClass('nav-show')
                    // $(this).find('div').removeClass('nav-box')
                }
            })
            //当前选中
            $(this).addClass('a_active')
            $(this).find('.li-a').addClass('active')
            // 打开右侧箭头
            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
            $(this).addClass('nav-show')
        })

        var menu_btn = document.querySelector("#menu-btn");
        var zleft = document.querySelector("#zleft");
        var container = document.querySelector(".nav-right");
        menu_btn.addEventListener("click", () => {
            alert('111');
            zleft.classList.toggle("active-nav");
            container.classList.toggle("active-cont");
        });
    })

</script>
</body>
</html>
